<template>
    <view class="viewport">
      <!-- 顶部背景 -->
      <view class="navbar" :style="{ paddingTop: SafeArea.top + 'px' }">
        <view class="back icon-left" @click="goBack"></view>
        <view class="title">个人信息</view>
      </view>
      <scroll-view scroll-y>
        <!-- 头像 -->
        <view class="avatar" @tap="changeAvatar">
          <image :src="memberProfile.avatar" mode="aspectFill" />
          <text>点击修改头像</text>
        </view>
        <view class="form">
          <view class="form-item">
            <text class="label">账号</text>
            <!-- 账号名不能修改，用 text 组件展示 -->
            <text>{{ memberProfile.account }}</text>
          </view>
          <view class="form-item">
            <text class="label">昵称</text>
            <!-- 输入框通过 v-model 双向绑定修改数据 -->
            <input v-model="memberProfile.nickname" />
          </view>
          <view class="form-item">
            <text class="label">性别</text>
            <radio-group @change="genderChange">
              <label class="radio">
                <radio
                  value="男"
                  color="#27ba9b"
                  :checked="memberProfile.gender === '男'"
                />
                男
              </label>
              <label class="radio">
                <radio
                  value="女"
                  color="#27ba9b"
                  :checked="memberProfile.gender === '女'"
                />
                女
              </label>
            </radio-group>
          </view>
          <view class="form-item">
            <text class="label">出生日期</text>
            <!--mode选择器类型 value当天 start有效日期的开始 start有效日期范围的结束
            bindchange value改变触发  -->
            <picker
              @change="handleBirthdayChange"
              mode="date"
              start="1900-01-01"
              :end="datenow"
            >
              <view>{{ memberProfile.birthday || "请选择日期" }}</view>
            </picker>
          </view>
          <view class="form-item">
            <text class="label">城市</text>
            <picker @change="handleFullLocationChange" mode="region">
              <view>{{ memberProfile.fullLocation || "请选择城市" }}</view>
            </picker>
          </view>
          <view class="form-item">
            <text class="label">职业</text>
            <!-- 输入框通过 v-model 双向绑定修改数据 -->
            <input v-model="memberProfile.profession" placeholder="请填写职业" />
          </view>
          
        <picker mode="region">
             <view>哈哈</view>
            </picker>
          <!-- 提交按钮 -->
          <view class="button" @click="handleSubmitForm">保 存</view>
        </view>

       
      </scroll-view>
    </view>
  </template>

<script>
import {getmemberprofile,postmemberProfile,putmemberprofile} from '@/api/profile'
import { mapState } from 'vuex';
import dayjs from 'dayjs'
export default {
    data(){
        return{
            memberProfile:null
        }
    },
    //因为没有登录去登录后跳转到当前页面还要继续获取数据
    onShow(){
        this.getmemberprofile()
    },
methods:{
    // 获取用户信息数据回填
    async getmemberprofile(){
    const res= await getmemberprofile()

    console.log(res);
    this.memberProfile=res.result
    },
    // 修改头像
   async changeAvatar(){
        // 获取临时路径
       const [err,res] = await uni.chooseMedia({
            count:1,
            mediaType:['image']
        })

        const tempFilePath= res.tempFiles[0].tempFilePath
        // 上传文件接口
      const [errs,result]= await  postmemberProfile(tempFilePath)
    // 将响应回来的数据转为JS对象
     const imgfile=   JSON.parse(result.data)
    // 将响应回来头像赋值给当前获取的头像,用于本地预览
      const avatar = imgfile.result.avatar
      this.memberProfile.avatar=avatar

    },
    // 选择性别
    genderChange(e){
// console.log(e);
this.memberProfile.gender=e.detail.value
    },
    // 选择出生日期
    handleBirthdayChange(e){
        // console.log(e);
        this.memberProfile.birthday=e.detail.value
    },
    // 获取城市
    handleFullLocationChange(e){
        console.log(e);
        // 将选择的省市区赋值给fullLocation展示在页面
        this.memberProfile.fullLocation=e.detail.value.join('')
        // 将选择的省市区编码赋值给接口要求的属性发送请求
       this.memberProfile.provinceCode=e.detail.code[0]
       this.memberProfile.cityCode=e.detail.code[1]
       this.memberProfile.countyCode=e.detail.code[2]

    },
// 注意
// 在这里获取用户信息进行数据回填和发送修改请求使用的是一个对象
// 但是获取用户信息数据对象里的属性和修改用户信息的参数不同
// 不能直接去复用这个数据对象
// 在这里还是以获取用户信息的数据对象为准
// 不同的地方在于省市区
// 在页面上展示的是省市区的文字
// 发送请求的参数所需要的是省市区的编码
// 所以我们将选择的省市区的文字内容赋值给当前页面获取个人信息的数据对象里的属性展示在页面进行数据回填
// 给这个数据对象添加新的属性来存放选择的省市区的编码
// 这个省市区的编码只是作为发送请求的参数，不作为页面展示的数据
// 将这个编码发送到服务器，服务器会自动解析为文字内容
// 所以当我们发送获取用户信息请求获得数据，拿到的是省市区的文字内容
// 所以我们在发送修改个人信息请求的时候,就要将参数从这个数据对象拿出来再去发送请求

    // 提交
  async  handleSubmitForm(){
        // 获取用户选择的数据
        const {  birthday,cityCode,countyCode,gender,nickname,profession,provinceCode}=this.memberProfile
      const params= {  birthday,cityCode,countyCode,gender,nickname,profession,provinceCode}
        //发送请求
      const res = await putmemberprofile(params)

    //   获取到vuex中的数据
    // 获取到vuex中保存用户信息的数据
    // 将数据浅拷贝给userInfo对象，那么Vuex里用户信息的所有数据都在这个新对象中
    const userInfo = {...this.$store.state.user.userInfo}
    // 将这个新对象中的头像和姓名改为修改后的数据
            userInfo.avatar = this.memberProfile.avatar
            userInfo.nickname=nickname


    // 将当前修改的头像和name对vuex中的userInfo数据进行重新赋值
    // vuex中的数据会存入本地，那么在我的页面就会从本地获取这里修改后的数据
    // 实现同步显示
    this.$store.commit('user/setuserInfo',userInfo)
    // 提示用户
    
    uni.showToast({title:"修改成功"})
    //跳转 
    setTimeout(() => {
        uni.navigateBack()
    }, 1000);
    },
    goBack(){
    // 返回上一页
    uni.navigateBack()
}
    
},

computed:{
    ...mapState(['SafeArea']),
    // 设置当前日期为可选日期的范围
    datenow(){
return dayjs().format('YYYY-MM-DD')
    }
}
};
</script>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
  background-color: #f4f4f4;
}
.viewport {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-image: url(https://static.botue.com/erabbit/static/images/order_bg.png);
  background-size: auto 392rpx;
  background-repeat: no-repeat;
}
.navbar {
  .title {
    height: 40px;
    line-height: 32px;
    text-align: center;
    font-size: 17px;
    font-weight: 500;
    color: #fff;
  }
  .back {
    position: absolute;
    left: 20rpx;
    top: 22px;
    font-size: 23px;
    z-index: 9;
    color: #fff;
  }
}
.avatar {
  text-align: center;
  padding: 20rpx 0 40rpx;
  image {
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
  }
  text {
    display: block;
    padding-top: 20rpx;
    line-height: 1;
    font-size: 26rpx;
    color: #fff;
  }
}
.form {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;
  .form-item {
    display: flex;
    height: 96rpx;
    line-height: 46rpx;
    padding: 25rpx 10rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;
    &:last-child {
      border: none;
    }
    .label {
      width: 180rpx;
      color: #333;
    }
    input {
      flex: 1;
      display: block;
      height: 46rpx;
    }
    .radio {
      display: inline-block;
      height: 46rpx;
      margin-right: 20rpx;
      vertical-align: middle;
    }
    radio {
      transform: scale(0.7) translateY(-2px);
    }
    picker {
      flex: 1;
    }
  }
}
.button {
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}
</style>